<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Facebook Modal Overlay Example</title>
		
		<style type="text/css">
			
			* { margin: 0; padding: 0; }
			
			body { font: 87.50%/1.5 "Lucida Grande", Helvetica, Arial, sans-serif; }
			
			p { margin-bottom: 1.5em; }
			
			button { padding: 4px 8px; }
			
			#wrapper { margin: 20px; }
			
			#fbOverlay { display: none; }
			
			.yui-overlay-mask { background: rgba(255, 255, 255, 0.5); }
			
			.yui-widget #fbOverlay {
				display: block;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 6px;
				-moz-border-radius: 6px;
				-webkit-border-radius: 6px;
				padding: 10px;
			}
			#fbOverlay .yui-widget-hd {
				border: #3B5998 1px solid;
				background: #6D84B4;
				color: #fff;
				padding: 0 10px;
				cursor: move;
			}
			#fbOverlay .yui-widget-bd {
				background: #fff;
				border: #555 1px solid;
				border-top: none;
				border-bottom : none;
				padding: 10px;
			}
			#fbOverlay .yui-widget-ft {
				border: #555 1px solid;
				border-top: none;
				background: #f2f2f2;
			}
			#fbOverlay .yui-widget-ft > div {
				border-top: #ccc 1px solid;
				padding: 5px 10px;
				text-align: right;
			}
			
		</style>
		
		<!--[if (IE 7)|(IE 8)]>
			<style type="text/css">
				
				.yui-overlay-mask { background: url(img/light.png); }
				
				.yui-widget #fbOverlay { background: url(img/dark.png); } 
				
			</style>
		<![endif]-->
		
	</head>
	
	<body class="yui-skin-sam">
		<div id="wrapper">
			<h1>Facebook <em>Modal</em> Overlay Example</h1>
			<p>
				This example of a Facebook-style overlay is created with YUI 3 and CSS 3.<br />
				The overlay is modal (i.e. you can't click or select anything under it) and is also draggable; grab it by the heading.
			</p>
			<p><button id="show-fbOverlay">show overlay</button></p>
			<div id="fbOverlay">
				<div class="yui-widget-hd">
					<h3>Facebook <em>Modal</em> Overlay Example</h3>
				</div>
				<div class="yui-widget-bd">
					<p>the body</p>
				</div>
				<div class="yui-widget-ft">
					<div>
						<button id="toggle-mask">unmask</button>
						<button id="hide-fbOverlay">close</button>
					</div>
				</div>
			</div>
		</div>
		
		<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js" type="text/javascript"></script>
		<script src="overlay-modal.js" type="text/javascript"></script>
		<script type="text/javascript">
			YUI().use('gallery-overlay-modal', 'dd-constrain', function(Y){
				
				var fbOverlay = new Y.Overlay({
					
					contentBox	: '#fbOverlay',
					width		: '540px',
					height		: '300px',
					visible		: false
										
				});
				fbOverlay.plug(Y.Plugin.OverlayModal);
				fbOverlay.render();
				
				// make overlay draggable
				(new Y.DD.Drag({
					
					node : fbOverlay.get('boundingBox'),
					handles : ['.yui-widget-hd']
					
				})).plug(Y.Plugin.DDConstrained, { constrain2view : true });
				
				// show overlay
				Y.on('click', function(e){
					if ( ! fbOverlay.get('visible')) {
						fbOverlay.align(this, [Y.WidgetPositionExt.TL, Y.WidgetPositionExt.TR]);
						fbOverlay.show();
					}
				}, '#show-fbOverlay');
				
				// toggle mask
				Y.on('click', function(e){
					var masked = fbOverlay.modal.get('mask');
					if (masked) {
						fbOverlay.modal.unmask();
						this.set('text', 'mask');
					} else {
						fbOverlay.modal.mask();
						this.set('text', 'unmask');
					}
				}, '#toggle-mask');
				
				// hide overlay
				Y.on('click', function(e){
					fbOverlay.hide();
				}, '#hide-fbOverlay');
			});
			
		</script>
	</body>
</html>
